<style type="text/css">    
   .left_column {			
		width:300px;
	}
</style>


<div class="left_column">
	<!-- Add links, images, news e.t.c -->
	
      <h3>Top 5 events of the: </h3><br/>
	  <h3>
	  ${intervals}	  
	  </h3> <br/>       
	  <!-- <img src="img/greece-top5-day.gif" width="200" height="166" alt ="Top 5 events"/> -->
	  
	  <!-- <table width="200" border="0">
		  <tr>
		    <th scope="col">Time</th>
			<th scope="col">Lat./Long.</th>			
			<th scope="col">Depth</th>
			<th scope="col">Mag.</th>			
		  </tr>
  
  		${quakes}  
  
	  </table> -->
	  <br>
	  
	  <!-- Google map -->
	  <% String url = request.getContextPath() + "/";
	     if(url.equals("//")){
		 	url = "img/marker";
		 }
		 else{
	     	url = url + "img/marker";
		 }
	  %>
	  
	  <script  src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=${key}"
		  type="text/javascript"></script>
	 
	 <script type="text/javascript">
	 
	   

     //<![CDATA[
	 
	 	// Creates a marker at the given point with the given number label
		function createMarker(quake) { 
		  var point = new GLatLng(parseFloat(quake.getAttribute("lat")),
		  						  parseFloat(quake.getAttribute("lng")));
								  
		  var icon = G_DEFAULT_ICON;
		  
		  var mag = parseFloat(quake.getAttribute("mag"));
		  
		  var imgURL = "";
		  
		  if(mag >= 7){
		  	imgURL = "A.png";
		  }
		  else if (mag >= 6){
		    imgURL = "B.png";
		  }
		  else if (mag >= 5){
		    imgURL = "C.png";
		  }
		  else if (mag >= 4){
		    imgURL = "D.png";
		  }
		  else {
		    imgURL = "E.png";
		  }
		  
		  icon.image = "<%= url %>" + imgURL;			  		  
		  
		  var time = "<b>Time</b>: " + quake.getAttribute("time");
		  var depth = "<b>Depth</b>: " + quake.getAttribute("depth");
		  var mag = "<b>Magnitude (Ms)</b>: " + quake.getAttribute("mag");
		                                                                    
		  var content = mag + "<br/>" + time + "<br/>" +  depth;
		  
		  var marker = new GMarker(point, icon);		  
		  
		  GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(content);
		  }); 
		  
          return marker;                                           
		} 		
		

		function load() {  
		  if (GBrowserIsCompatible()) {
			var map = new GMap2(document.getElementById("map"));
			
			map.addControl(new GSmallZoomControl());			
			map.setCenter(new GLatLng(${center.latitude}, ${center.longitude}), ${center.zoomLevel});
	      		                                           
			// add markers	
			
			GDownloadUrl("top", function(data, responseCode) {			  
  			  var xml = GXml.parse(data);			  
			  var quakes = xml.documentElement.getElementsByTagName("quake");
			  for (var i = 0; i < quakes.length; i++) {				
				map.addOverlay(createMarker(quakes[i]));
			  }
			  
			  
			});
			
			
		  }
		  else {		  
             alert("Sorry, Seismo-Surfer is not compatible with this browser.");
          }
		}

     //]]>
     </script>	 
	 
	 <div  id="map" style="width: 300px; height: 250px"></div>	  
	     
	  <!-- Google map -->

	   
	  <br/>
	  <p><b>A</b>: 7&gt;    &nbsp;&nbsp;&nbsp;&nbsp;<b>B</b>: 6-7    &nbsp;&nbsp;&nbsp;&nbsp;
	  <b>C</b>: 5-6    &nbsp;&nbsp;&nbsp;&nbsp;<b>D</b>: 4-5    &nbsp;&nbsp;&nbsp;&nbsp;<b>E</b>: &lt; 4</p>
	  <p><strong>Last update: </strong> ${update}</p>
	<p> 
	<form name="sources" action="main" enctype="application/x-www-form-urlencoded" >
		 <label> <strong>Data Source:</strong> 
		  <select name="source" onChange="document.sources.submit()">		  
			${sources}
		  </select>
		 </label>		 
   </form>
	</p>
	<p class="error">${error["source"].message}</p>
	<p class="error">${error["interval"].message}</p>	  
</div>